<template>
  <div class="content">
    <div class="center_box">
      <div class="add_box">
        <h3>基础信息</h3>
        <div class="add_right">
          <el-form
            label-position="top"
            label-width="auto"
            :model="objectForm"
            style="margin: auto"
            ref="fromRef"
          >
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="产品名称:" required prop="name">
                  <el-input v-model="objectForm.name" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分类:" prop="category">
                  <el-input v-model="objectForm.name" />
                  <!-- <HhSelect type='category' @change="hChange" v-model="categoryInfo"/> -->
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="描述:" required prop="description">
                  <el-input v-model="objectForm.description" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="现价:" required prop="price">
                  <el-input v-model="objectForm.price" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="原价:" prop="originalPrice">
                  <el-input v-model="objectForm.originalPrice" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="库存:" prop="stockQuantity">
                  <el-input v-model="objectForm.stockQuantity" />
                </el-form-item>
              </el-col>
            </el-row>
            <div class="title_h_box">
              <h3>拓展信息</h3>
            </div>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="产品主图:" prop="imgFile">
                  <el-upload
                    :show-file-list="false"
                    :on-change="fileChange"
                    accept=".jpg,.jpeg,.png"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <div v-else class="upload_box">
                      点击上传<span>this is upload box ,is great</span>
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="地区:" prop="stockQuantity">
                  <el-input v-model="objectForm.stockQuantity" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="网址:" prop="stockQuantity">
                  <el-input v-model="objectForm.stockQuantity" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="指纹策略:" prop="stockQuantity">
                  <el-input v-model="objectForm.stockQuantity" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="上架" prop="isActive">
                  <el-switch
                    :active-value="1"
                    :inactive-value="0"
                    v-model="objectForm.isActive"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="title_h_box" style="justify-content: flex-end">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="confirmAdd">确定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineOptions, ref } from "vue";
import { ElMessage } from "element-plus";
import HhSelect from "../../../components/utils/HhSelect.vue";
import { useRouter } from "vue-router";
import * as productApi from "../../../api/project3/product/product.js";

defineOptions({ name: "productInfo" });

const objectForm = ref({
  productCode: "", // 商品编码，String 类型
  name: "", // 商品名称，不能为空，String 类型
  category: "", // 商品类别，String 类型
  description: "", // 商品描述，String 类型
  price: 0, // 商品价格，BigDecimal 类型，保留两位小数
  originalPrice: 0, // 商品折前价格，BigDecimal 类型，保留两位小数
  stockQuantity: 0, // 商品库存数量，默认0，Integer 类型
  isActive: 1, // 商品状态，1表示上架，0表示下架，默认1，Integer 类型
  image: "", // 图片，String 类型
  imgFile: "",
});

let imageUrl = ref("");

const categoryInfo = ref("");

const fromRef = ref();

const router = new useRouter();
const hChange = (e) => {
  objectForm.value.category = e.id;
};

const cancel = (e) => {
  router.push({
    name: "product",
  });
};

const confirmAdd = async () => {
  const formData = new FormData();

  for (let key in objectForm.value) {
    formData.append(key, objectForm.value[key]);
  }

  // const res = await productApi.saveOrUpdate(formData)
  // const { code , msg } =res
  // if(code == '200') {
  //     ElMessage.success('操作成功')
  //     fromRef.value.resetFields()
  //     return
  // }
  // ElMessage.error(msg)
};

const fileChange = (file) => {
  imageUrl.value = URL.createObjectURL(file.raw);
  objectForm.value.imgFile = file.raw;
};
</script>

<style lang="less" scoped>
.add_right {
  width: 90%;
  height: 80%;
}

.center_box {
  flex-direction: column;
  justify-content: flex-start;
  margin-top: 0;
  padding-top: 0;
}
.add_box {
  padding-top: 0px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  margin-top: 0;
}
.title_h_box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}
</style>